<script setup lang="tsx">

import { computed, reactive, ref } from 'vue';
import { PageEntity } from '@/entity/page.entity';
import { createCourseApi, deleteCourseApi, getCoursePageApi, updateCourseApi } from '@/service/path/train/course';
import { useTable } from '@/hooks/common/table';
import { postAction } from '@/service/request/action';
import { useCrud } from '@/hooks/common/crud';
import CourseSearch from '@/views/train/course/modules/course-search.vue';
import CourseModal from '@/views/train/course/modules/course-modal.vue';
import dayjs from 'dayjs';
import OpenCourseInfo from '@/views/train/course/modules/open-course-info.vue';

const state = reactive({
  pageInfo: new PageEntity(),
  opPath: {
    createPath: createCourseApi,
    updatePath: updateCourseApi
  },
  weekMap: {
    1: '星期一',
    2: '星期二',
    3: '星期三',
    4: '星期四',
    5: '星期五',
    6: '星期六',
    7: '星期日'
  },
  mainStatus: 'main',
  currentCourseId: ''
});
const {
  columns,
  columnChecks,
  data,
  loading,
  mobilePagination,
  searchParams,
  getData,
  clickSearch,
  clickReset
} = useTable({
  apiFn: () => postAction(getCoursePageApi, state.pageInfo),
  showTotal: true,
  immediate: true,
  apiParams: {
    name: ''
  },
  pageInfo: state.pageInfo,
  columns: () => [
    {
      title: '序号',
      key: 'index'
    },
    {
      title: '课程名称',
      key: 'name'
    },
    {
      title: '课时数',
      key: 'classHours'
    },
    {
      title: '学生人数',
      key: 'studentCount'
    },
    {
      title: '时段',
      key: 'weekDay',
      render: (row: Api.Train.Course) => {
        return state.weekMap[row.weekDay] + ' ' + row.startTime.slice(0, 5) + '~' + row.endTime.slice(0, 5);
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (row: Api.Train.Course) => <common-operate-column
        row-data={row} onClickEdit={row => clickEdit(row.id, row)}
        onClickDelete={row => clickDelete(row.id)}
        v-slots={{
          default: () => <>
            <n-button type="info" text onClick={() => clickOpenCourse(row.id)}>开课学生</n-button>
          </>
        }}
      />
    }
  ]
});
const {
  modalFormRef, childRef, clickAdd, clickEdit, clickDelete
} = useCrud({
  uris: {
    delete: deleteCourseApi
  },
  refreshList: getData
});
const weekList = computed(() => {
  const dataList = [];
  for (const key in state.weekMap) {
    dataList.push({
      label: state.weekMap[key],
      value: ~~key
    });
  }
  return dataList;
});
const clickOpenCourse = (id: string) => {
  state.currentCourseId = id;
  state.mainStatus = 'open-course';
};
const clickBack = () => {
  state.mainStatus = 'main';
  getData();
};
const otherInitMethod = (row: Api.Train.Course) => {
  if (row) {
    childRef.value.state.ruleForm.startTime = new Date('2025-01-01 ' + row.startTime).getTime();
    childRef.value.state.ruleForm.endTime = new Date('2025-01-01 ' + row.endTime).getTime();
  }
};
const submitTransferData = formData => {
  formData.startTime = dayjs(formData.startTime).format('HH:mm:ss');
  formData.endTime = dayjs(formData.endTime).format('HH:mm:ss');
  return formData;
};
</script>

<template>
  <div>
    <div v-if="state.mainStatus === 'main'" class="flex-col-stretch gap-16px lt-sm:overflow-auto">
      <CourseSearch v-model:model="searchParams" @click-reset="clickReset" @click-search="clickSearch" />
      <n-card title="课程列表" class="flex-1">
        <template #header-extra>
          <TableHeaderOperation
            v-model:columns="columnChecks"
            :loading="loading"
            @click-add="clickAdd"
          />
        </template>
        <n-data-table
          :columns="columns"
          :data="data"
          :loading="loading"
          remote
          :row-key="row => row.id"
          :pagination="mobilePagination"
          class="sm:h-full"
        />
      </n-card>
      <CommonModal ref="modalFormRef" title="课程" :op-path="state.opPath" @refresh-list="getData"
                   :other-init-method="otherInitMethod" :submit-transfer-data="submitTransferData">
        <CourseModal ref="childRef" :week-list="weekList" />
      </CommonModal>
    </div>
    <OpenCourseInfo v-if="state.mainStatus === 'open-course'" :course-id="state.currentCourseId" @click-back="clickBack"/>
  </div>
</template>

<style scoped>

</style>
